<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-19 08:46:02
 * @LastEditTime: 2021-08-02 10:09:01
 * @Description: 缺陷列表
-->

<template>
    <div id="defectDetail_page">
        <!-- 顶部导航 -->
        <van-nav-bar title="缺陷列表" left-arrow @click-left="back" fixed>
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 查询条件 -->
        <div class="selectPart">
            <!-- <van-search style="position: relative;
				top: -10px;" v-model="searchData.subName" show-action clearable readonly disabled @click="selectSubShow"
                shape="round" background="#F5F6FA" placeholder="请选择变电站">
            </van-search> -->
            <van-field v-model="searchData.subName" show-action clearable readonly disabled right-icon="arrow-down"
                @click="selectSubShow" placeholder="请选择变电站" style="width: 100%;
                    height: 40px;
                    background: inherit;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(229, 229, 229, 1);
                    line-height: 15px;
                    border-radius: 25px;
                    margin-bottom: 0.5rem;
                    margin-top: -0.8rem;" />
            <!-- 选择隐患状态 -->
            <div class="topLine">
                <div class="left">
                    <span class="title">缺陷状态：</span>
                    <van-field v-model="searchData.statusName" show-action clearable readonly disabled
                        right-icon="arrow-down" @click="showStatusPop = true" placeholder="请选择缺陷状态" style="width: 85%;
                    height: 34px;
                    background: inherit;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(229, 229, 229, 1);
                    line-height: 15px;
                    border-radius: 25px;" />
                </div>
            </div>
            <div class="bottomLine">
                <span class="title">发现时间：</span>
                <!-- <span class="field" @click="showStartTimeShow">{{searchData.startTime}}</span> -->
                <van-field :border="false" class="time" v-model="searchData.startTime" show-action clearable readonly
                    disabled right-icon="arrow-down" @click="showStartTimeShow" placeholder="开始时间" style="width: 34%;
                    height: 34px;
                    background: inherit;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(229, 229, 229, 1);
                    line-height: 15px;
                    border-radius: 25px;">
                    <template slot="right-icon">
                        <img :src="icon.time" style="width: 30px;" />
                    </template>
                </van-field>
                <!-- </div> -->
                <span class="zhi">——</span>
                <!-- <span class="field" @click="showEndTimeShow">{{searchData.endTime}}</span> -->
                <van-field class="time" v-model="searchData.endTime" show-action clearable readonly disabled
                    right-icon="arrow-down" @click="showEndTimeShow" placeholder="结束时间" style="width: 34%;
                    height: 34px;
                    background: inherit;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(229, 229, 229, 1);
                    line-height: 15px;
                    border-radius: 25px;">
                    <template slot="right-icon">
                        <img :src="icon.time" style="width: 30px;" />
                    </template>
                </van-field>
            </div>
            <!-- 发现时间下拉弹窗(开始) -->
            <van-popup v-model="showStartTime" position="bottom">
                <van-datetime-picker type="datetime" title="开始时间" @confirm="confirmTime('start')" v-model="startTime2"
                    :formatter="formatter" :min-date="minDate" :max-date="maxDate" @cancel="showStartTime = false" />
            </van-popup>
            <!-- 发现时间下拉弹窗(结束) -->
            <van-popup v-model="showEndTime" position="bottom">
                <van-datetime-picker type="datetime" title="结束时间" @confirm="confirmTime('end')" v-model="endTime2"
                    :formatter="formatter" :min-date="minDate" :max-date="maxDate" @cancel="showEndTime = false" />
            </van-popup>
        </div>
        <div class="kong"></div>
        <!-- 任务列表 -->
        <div class="listPart">
            <van-row style="margin: 10px 0px 0px 0px;" class="bg_4dbfae header search_header" type="flex"
                justify='space-around'>
                <van-col span="16">
                    <van-field class='searchField' v-model.trim="defectContent" right-icon="search"
                        @click-right-icon="serarch" placeholder="请输入查询内容" style="width: 100%;
                    height: 34px;
                    background: inherit;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(229, 229, 229, 1);
                    line-height: 15px;
                    border-radius: 25px;" />
                </van-col>
                <van-col span="2" class="center_center" style='margin-left: 0.8rem; margin-top: 0.5rem;'>
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" @click="rfidBtn" :src="icon.rfid" />
                    </div>
                </van-col>
                <van-col span="2" class="center_center" style='margin-top: 0.5rem;'>
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" @click="scanBtn" :src="icon.scan" />
                    </div>
                </van-col>
                <van-col span="2" class="center_center" style='margin-top: 0.5rem;' @click="addBtn">
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" :src="icon.add" />
                    </div>
                </van-col>
            </van-row>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getDefectList">
                <div class="defectItem" v-for="(item,i) of defectList" :key="i" @click="toDetail(item)">
                    <!-- 左侧图片区域 -->
                    <!-- 右侧文字区域 -->
                    <div class="rightPart">
                        <div class="topPart">
                            <div v-if="item.defectStatus=='0'" class="status red">缺陷登记</div>
                            <div v-if="item.defectStatus=='1'" class="status blue">班组审核</div>
                            <div v-if="item.defectStatus=='2'" class="status orange">检修专责审核</div>
                            <div v-if="item.defectStatus=='3'" class="status green">消缺安排</div>
                            <div v-if="item.defectStatus=='4'" class="status green">缺陷入池</div>
                            <div v-if="item.defectStatus=='5'" class="status green">缺陷处理</div>
                            <div v-if="item.defectStatus=='6'" class="status green">缺陷验收</div>
                            <div v-if="item.defectStatus=='7'" class="status grey">结束</div>
                            <div><span>缺陷性质：</span><span class="textColor">一般</span></div>
                        </div>
                        <div class="describ">{{item.defectContent}}</div>
                        <div class="timePart">
                            <div>发现时间：<span class="val333">{{item.findTime|filterTime}}</span></div>
                            <div>消缺时间：<span class="val333">{{item.eliminateDefectTime|filterTime}}</span></div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

        <!-- 反馈组件 选择变电站-->
        <van-popup class="selSub" round v-model="showSubStation" position="top">
            <selSubstation @close="onClose" @selected="selSubstationBtn">
            </selSubstation>
        </van-popup>
        <!-- 选择状态-->
        <van-popup :style="{ height: '30%' }" round v-model="showStatusPop" position="bottom">
            <div class="selectUser">
                <van-nav-bar title="缺陷状态"></van-nav-bar>
                <div class="stateListPart">
                    <van-cell v-for="(item, index) in statusArr" clickable :key="index" :title="item.name" clickable
                        @click="confirmStatus(item)">
                    </van-cell>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import selSubstation from "@/components/SelectSubstation"
    import { getDefectList, downLoadFileUrl } from "../../api/defect"
    export default {
        name: "defectList",
        components: {
            selSubstation
        },
        data() {
            return {
                defectList: [],
                // 筛选条件
                showSubStation: false,// 显示选择变电站弹窗
                searchData: {
                    subName: "请选择站点",
                    subId: "",
                    status: "",
                    statusName: "",
                    defectNature: "",
                    startTime: '',
                    endTime: '',
                },
                // 隐患状态
                status: "",
                //是否展示隐患状态
                showStatusPop: false,
                //是否展示隐患性质
                showXingzhiPop: false,
                // 缺陷状态下拉数组
                statusArr: [
                    { hazardStatus: '0', name: '缺陷登记' },
                    { hazardStatus: '1', name: '班组审核' },
                    { hazardStatus: '2', name: '检修专责审核' },
                    { hazardStatus: '3', name: '消缺安排' },
                    { hazardStatus: '4', name: '缺陷入池' },
                    { hazardStatus: '5', name: '缺陷处理' },
                    { hazardStatus: '6', name: '缺陷验收' },
                    { hazardStatus: '7', name: '结束' },
                ],
                loading: false,//加载状态
                finished: false,//加载完成
                total: 0,// 总条数
                pageNum: 1,// 当前页
                pageSize: 10,// 每页条数
                //是否展示开始时间
                showStartTime: false,
                //是否展示结束时间
                showEndTime: false,
                minDate: new Date(),
                maxDate: new Date(2080, 10, 1),
                // 开始时间
                startTime1: "",
                startTime2: "",
                // 结束时间
                endTime1: "",
                endTime2: "",
                userInfo: JSON.parse(localStorage.getItem("userInfo")),
                icon: {
                    rfid: require('../../../../assets/img/mainIndex/rfid.png'),
                    scan: require('../../../../assets/img/mainIndex/scan.png'),
                    add: require('../../../../assets/img/mainIndex/add.png'),
                    time: require("@assets/img/mainIndex/time.png"),
                },
                defectContent: ""
            }
        },
        mounted() {
            this.defectList = []
            // 获取隐患列表
            // this.getDefectList()
        },
        methods: {
            //日期格式
            formatter(type, val) {
                if (type === 'year') {
                    return val + '年';
                }
                if (type === 'month') {
                    return val + '月';
                }
                if (type === 'day') {
                    return val + '日';
                }
                if (type === 'hour') {
                    return val + '时';
                }
                if (type === 'minute') {
                    return val + '分';
                }
                return val;
            },
            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
            },
            /**
             * @description: 模糊查询缺陷列表
             * @param {*}
             * @return {*}
             */
            serarch() {
                this.defectList = []
                this.getDefectList()
            },
            /**
             * @description: 开始时间弹窗打开
             * @param {*}
             * @return {*}
             */
            showStartTimeShow() {
                this.showStartTime = true
                this.startTime2 = new Date()
            },
            /**
             * @description: 结束时间弹窗打开
             * @param {*}
             * @return {*}
             */
            showEndTimeShow() {
                this.showEndTime = true
                this.endTime2 = new Date()
            },
            /**
             * @description: 获取缺陷列表
             */
            getDefectList() {
                var self = this
                this.$toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "正在获取...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                var params = {
                    "defectNature": "",// 缺陷性质
                    "deviceId": "",
                    "defectContent": this.defectContent,// 缺陷内容
                    "defectStatus": this.searchData.status,// 消缺状态
                    "endTime": this.endTime2,// 结束时间
                    "pageSize": this.pageSize,// 页面条数
                    "pageNum": this.pageNum, // 页码
                    "roleCode": "",
                    "startTime": this.startTime2,// 开始时间
                    "substationId": this.searchData.subId,// 变电站
                    "userId": this.userInfo.userId// 用户id
                }
                getDefectList(params).then(function (res) {
                    // 加载状态开始
                    self.loading = true;
                    console.log(res);
                    self.$toast.clear()
                    if (res.success) {
                        self.defectList = self.defectList.concat(res.data)
                        if (self.defectList.length >= self.total) {
                            self.finished = true;
                        } else {
                            self.pageNum++
                            // 加载状态结束
                            self.loading = false;
                        }
                    } else {
                        self.defectList = []
                        self.total = 0
                        self.finished = true;
                    }
                }).catch(err => {
                    self.finished = true;
                    self.$toast.clear()

                });
            },


            selectSubShow() {
                this.showSubStation = true
            },

            //变电站选中回调
            selSubstationBtn(sub) {
                this.showSubStation = false;
                this.searchData.subId = sub.substationId;
                this.searchData.subName = sub.substationName;
                this.getDefectList();
            },

            /**
            * @description: 关闭变电站
            */
            onClose() {
                this.showSubStation = false;
            },

            /**
             * @description: 确认选择隐患状态
             * @param {String} val 隐患状态
             */
            confirmStatus(val) {
                this.defectList = []
                this.searchData.status = val.hazardStatus
                this.searchData.statusName = val.name
                this.showStatusPop = false
                this.getDefectList()
            },

            /**
             * @description: 确认选择缺陷性质
             * @param {String} val 缺陷状态
             */
            confirmXingzhi(val) {
                this.searchData.status = val.hazardStatus
                this.searchData.statusName = val.name
                this.showXingzhiPop = false
            },

            /**
             * @description: 确认选择时间
             * @param {String} type 确认类型
             */
            confirmTime(type) {
                if (!Utils.baseUtil.isEmptyString(this.endTime2)) {
                    if (this.startTime2 > this.endTime2) {
                        this.$toast("发现结束时间不能早于开始时间！")
                        return
                    }
                }
                this.defectList = []
                if (type == "start") {
                    console.log(this.searchData.startTime)
                    this.showStartTime = false
                    this.searchData.startTime = Utils.DateUtil.getFormatDateByLong(this.startTime2, 'yyyy-MM-dd hh:mm:ss')
                } else {
                    console.log(this.searchData.endTime)
                    if (this.startTime2 > this.endTime2) {
                        this.$toast("发现结束时间不能早于开始时间！")
                        return
                    } else {
                        this.showEndTime = false
                        this.searchData.endTime = Utils.DateUtil.getFormatDateByLong(this.endTime2, 'yyyy-MM-dd hh:mm:ss')
                    }
                }

                this.getDefectList()
            },

            /**
             * @description: 跳转至隐患详情
             * @param {Object} item 当前点击的隐患
             */
            toDetail(item) {
                if (item.defectStatus == '0') {
                    this.$router.push({
                        name: "AddDefect",
                        query: {
                            params: item
                        }
                    })
                } else {
                    console.log(JSON.stringify(item))
                    var self = this
                    var arr = item.attachmentList
                    item.DeImgOrVideoList = []
                    // 等后端接口好了，在这了下载文件并转换成路径
                    if (arr.length > 0) {
                        for (let i = 0; i < arr.length; i++) {
                            downLoadFileUrl({
                                "fileUuid": arr[i].attachmentUuid,
                                "type": "0"
                            }).then(res => {
                                item.DeImgOrVideoList.push(res)
                                if (item.DeImgOrVideoList.length == arr.length) {
                                    console.log(item);
                                    self.$router.push({
                                        name: "DefectDetail",
                                        query: { item: item }
                                    })
                                }
                            }).catch(err => {
                                console.log(22222222);
                                console.log(err);
                            })
                        }
                    } else {
                        self.$router.push({
                            name: "DefectDetail",
                            query: { item: item }
                        })
                    }
                }

            },
            rfidBtn() { },
            scanBtn() { },
            addBtn() {
                if (Utils.baseUtil.isEmptyString(this.searchData.subId)) {
                    this.$toast("请选择变电站！")
                    return
                }
                console.log(this.searchData);
                var paramsData = this.searchData
                console.log(paramsData);
                this.$router.push({
                    name: "AddDefect",
                    query: {
                        params: paramsData
                    }
                })
            },
        },
        watch: {
            taskList() {

            }
        },
        filters: {
            filterTime(val) {
                return Utils.DateUtil.getFormatDateByLong(val, 'yyyy-MM-dd hh:mm:ss')
            }
        }
    }
</script>
<style scoped>
    #defectDetail_page {
        background-color: rgba(250, 250, 250, 1);
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        border-radius: 25px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .tc-keyword-wrapper {
        margin: 5px 0;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .scan {
        margin: 0 10px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        margin-right: 10px;
    }

    /* 筛选区域 */
    .selectPart {
        width: 100%;
        padding: 20px;
        background-color: rgba(250, 250, 250, 1);
        font-size: 12px;
        color: #666;
        position: fixed;
        top: 46px;
        left: 0;
        box-sizing: border-box;
        padding-bottom: 1rem;
    }

    .selectPart .topLine {
        display: flex;
        justify-content: space-between;
    }

    .selectPart .topLine .left,
    .selectPart .topLine .right {
        width: 100%;
        display: flex;
    }

    .selectPart .topLine .left {
        margin-right: 20px;
    }

    .selectPart .title {
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
    }

    .selectPart .topLine .field {
        border: 1px solid #eee;
        display: inline-block;
        width: calc(100% - 70px);
        height: 30px;
        line-height: 30px;
        /* text-align: right; */
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 25px;
        background-color: #fff;
    }

    .selectPart .bottomLine {
        display: flex;
        margin-top: 10px;
    }

    .selectPart .bottomLine .field {
        height: 30px;
        line-height: 30px;
        border: 1px solid #eee;
        text-align: center;
        border-radius: 25px;
        padding: 0 10px;
        width: 29%;
        background-color: #fff;
    }

    .selectPart .bottomLine .zhi {
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
    }

    .kong {
        width: 100%;
        height: 190px;
    }

    /* 任务列表 */
    .listPart {
        padding: 0 10px 10px;
        height: 39rem;
        overflow-y: auto;
        width: 90%;
        margin: 0 auto;
        background-color: #fff !important;
    }

    .defectItem {
        height: 80px;
        background: #fafafa;
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .defectItem .leftPart {
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        margin-right: 20px;
    }

    .defectItem .rightPart {
        width: 100%;
    }

    .defectItem .rightPart .topPart {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectItem .rightPart .topPart .status.red {
        background: #eb3b3b;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.blue {
        background: #1481ee;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.orange {
        background: orange;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.grey {
        background: green;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.green {
        background: #ccc;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .describ {
        margin: 5px 0;
        color: #333;
    }

    .defectItem .rightPart .val333 {
        color: #333;
    }

    .selectPart /deep/ .van-col--16 {
        margin-right: 20px;
    }

    .selectPart /deep/ .van-col--2 {
        padding-top: 7px;
    }

    .van-search__action {
        display: none;
    }

    .van-icon-search::before {
        content: '\F0AF';
        font-size: 1.5rem;
        color: #999999;
    }

    .textColor {
        color: #000;
    }

    .van-image {
        position: unset;
    }

    .searchField /deep/.van-icon {
        position: unset !important;
    }

    .listPart /deep/.van-cell {
        position: unset !important;
    }

    .van-cell__value {
        position: unset !important;
    }

    .van-cell {
        position: unset !important;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
    }

    .listPart /deep/.van-cell__value {
        position: unset !important;
    }

    .time /deep/ .van-field__body {
        /* margin-top: -8px; */
        position: relative;
        top: -9px;
    }

    .selectUser {
        width: 100%;
        height: 100%;
    }

    .stateListPart {
        height: 11rem;
        overflow-y: auto;
    }

    .van-popup--bottom.van-popup--round {
        border-radius: 0px;
    }

    .van-cell__title,
    .van-cell__value {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        text-align: center;
    }

    .van-icon {
        position: unset;
    }
</style>